<style>
	.re-con{
		width: 100%;
		height: 100%;
		padding: 10px;
		box-sizing: border-box;
	}
	.re-con-item{
		width:100%;
		height:35px;
		display:flex;
		line-height:35px;
		font-size:14px;
		margin-bottom:15px;

	}
	.vi{
		flex:1;
		height:100%;
		display:flex;
		position:relative;
		padding-left:5px;
		color:#888;
		overflow:auto;
		margin-left: 10px;
		margin-right: 10px;
		border-radius:5px;
		border:1px solid #e5e5e5;

	}
	.vi>input{
		width:100%;
		height:94% !important;
		display:block;

	}
	.mint-radiolist{
		display: flex;
	}
	.mint-radiolist-title {
	    font-size: 14px;
	    margin: 15px 0px;
	    display: block;
	    color: #333;
	}
	.page__bd{
		width: 100%;
		display: flex;
	}
	.weui-cell__bd{
		flex: 1;
	}
	.addIcon{
		width: 65px;
		height: 65px;
		float: left;
		display: flex;
		position: relative;
		border: 1px solid #e5e5e5;
		justify-content: center;
		align-items: center;
	}
	.addIcon>input{
	    border: 0;
	    width: 100%;
	    height: 100%;
	    display: block;
	    text-overflow: clip;
	    overflow: hidden;
	    left: 0px;
	    top: 0px;
	    bottom: 0px;
	    right: 0px;
	    opacity: 0;
	    position: absolute;
	}
	.icon-daohangon{
		float: left;
		position: relative;
	}
	.icon-daohangon>img{
		width: 65px;
		height: 65px;
		display: inline-block;
		margin: 0px 10px;
	}
	.icon-shanchu{
		position: absolute;
		right: -5px;
		top: -7px;
		z-index: 50;
		color: #cc0000;
	}
	.memo{
		width: 100%;
		height: 40px;
		line-height: 10px;
		margin-top: 10px;
		
	}
	.memo>input{
		width: 100%;
		height: 100%;
		border: 1px solid #e5e5e5;
		display: inline-block;
		padding-left: 5px;
		border-radius: 5px;
		box-sizing: border-box;
		background: #E5E5E5;
		outline: none;
		line-height: 40px;
	}
	.mint-button--normal{
		width: 100%;
		margin-top: 10px;
		background: #00AA00;
	}
	.mint-datetime{
		z-index: 1000;
	}
	.area{
		display: block;
		width: 100%;
		padding: 10px;
		height: 100px;
		font-size: 14px;
		background: #F0F0F0;
		box-sizing: border-box;
		border-radius: 10px;
	}
	.repairBox{
		width: 97%;
		height: 35px;
		display: flex;
		line-height: 35px;
		margin-bottom: 10px;
		padding-left: 10px;
		box-sizing: border-box;
		border-radius: 5px;
		border: 1px solid #e5e5e5;
		
	}
	.icon-wo{
		font-size: 20px !important;
	}
	.repairBox>select{
		flex: 1;
		appearance:none;
		text-align: center;
		padding-left: 10px;
		position: relative;
		-moz-appearance:none;
		-webkit-appearance:none;
		border: none;
		margin:0 5px;
		
	}
</style>
<template>
	<div class="re-con">
		<div class="repairBox" v-if="repairList && repairList.length>0">
			<span class="iconfont icon-wo"></span>
			<select v-model="repairMan" :disabled="!qdsBtn">
				
				<option v-for="item  in repairList" v-bind:value="item.name">{{item.name}}</option>

			</select>
		</div>
		<div class="re-con-item">
			<span>施工项目：</span>
			<div class="vi">
				<input type="text" :disabled="!qdsBtn" maxlength="20" placeholder="请填写施工" v-model="porjectName" />
			</div>
		</div>
		
		<textarea class="area" placeholder="描述" v-model="memo"  maxlength='200' :disabled="!qdsBtn"></textarea>
		<div class="re-con-item">
			<span>图片<font style="color: #FF0000;">最多上传10张</font></span>
		</div>
		<div class="page__bd">
			<div class="weui-cell__bd">
				<div class="icon-daohangon" v-for="(item, index) in imgList">
					<img  :src="item"/>
					<i class="iconfont icon-shanchu" @click="removeImg(index)"></i>
				</div>
				<div class="addIcon" v-if="imgList.length<10 && qdsBtn">
					<span class="iconfont icon-jia1"></span>
					<input type="file" @change="uploadImg($event)" />
					<input 
					v-if="getNavigatorFlag == 1"					 
					type="file"  					 
					@change="uploadImg($event)" 
					accept="image/*" 
					capture="camera" 
					multiple
					/>
					<input 
					 v-if="getNavigatorFlag == 2"					
					 type="file"  					  
					 @change="uploadImg($event)" 
					 accept="image/*"
					 size="1"
					 />
				</div>
			</div>
		</div>
		
		<mt-button type="primary" @click="submitData" v-if="qdsBtn">上传</mt-button>
	</div>
</template>

<script>
	import { DatetimePicker,Radio ,Button ,MessageBox,Indicator,Toast, picker} from 'mint-ui';
export default {
	data(){
		return {
			repairMan:'请选择维修工',
			type:'',
			radioValue:'',
			porjectName:'',
			pickerValue:0,
			getNavigatorFlag:1, //安卓 2 IOS
			options: [
			  {
			    label: '被禁用',
			    value: '值F',
			    disabled: true
			  },
			  {
			    label: '被禁用',
			    value: '值F'
			    
			  }
			],
			brandName: '',
			seriesName: '',
			modelName: '',
			cartPlate:'',// 车牌
			cartMileage:'',// 里程
			cartOil: '', //油品
			amount: '', //油量
			imgList:[],
			price:'',
			time:'',
			maxLen:10,
			memo:'',
			carId:'',
			qdsBtn: true,
			repairList:[],
			loginName:''
		}
	},
	mounted(){
		console.log(this.$store.getters.getTenanceData)
		console.log(this.$route.query)
		if(this.$route.query.brandName) {
			this.modelName = this.$route.query.brandName+'-'+this.$route.query.seriesName+'-'+this.$route.query.modelName
			this.carId = this.$route.query.carId
		}
		if(this.$route.query){
			this.loginName = this.$route.query
		}
		console.log(this.$store.getters.getTructionData)
		if(this.$store.getters.getTructionData) {
			let attr = this.$store.getters.getTructionData
			this.porjectName = attr.project
			this.memo = attr.description
			this.imgList = attr.imageList
			this.qdsBtn = false
			
		}
		
		document.body.addEventListener('click', function(e){
			console.log()
			if(e.srcElement.className.includes('int-datetime-cancel')){
				document.getElementById('not').style.display = 'none'
			}
		})
		this.getNavigator()
		// 获取维修工列表
		this.getRepairList()
		
	},
	
	methods: {
		getRepairList(){
			let self = this
		    let url = this.$baseUrl.bizUrl + '/merchant/front/repair/list';
		    let data = {
		      	merchantId: this.$store.getters.getMerchant.merchantId
	        }
		    let callBack = (res) => {
		      	if(res.data.status == 200) {
		        	console.log(res)
		        	this.repairList = res.data.data.repairList
		        	this.repairList.unshift({'name':'请选择维修工','repairId':0})
		        	console.log(this.repairList)
		        	if(!this.qdsBtn){
		        		this.repairMan = this.$store.getters.getTructionData.repairName
		        	}
		      	}
		      }
		      this.$reqFormPost(url, data, callBack);
		   
		},
		getNavigator() {
			var u = navigator.userAgent;
			var isAndroid = u.indexOf('Android') > -1 || u.indexOf('Adr') > -1; //android终端
				isAndroid ? this.getNavigatorFlag = 1 : this.getNavigatorFlag = 2;
		},
		closeAll(){
			console.log(555)
		},
		submitData() {
			
			let  attr = this.repairMan == '请选择维修工' ? '请选择维修工' : !this.porjectName ? '请填写施工': !this.imgList.length ? '请上传图片':''
			if(attr){
				MessageBox.alert(attr);
				return
			}
			let self = this
    		let url = this.$baseUrl.bizUrl + '/construction/record/add'
    		let data = {
		      repairName: this.repairMan,
		      repairId: this.ghetRepairId(),
		      description: this.memo,
		      project:this.porjectName,
		      creator: this.loginName ? this.loginName:'',
		      imageList: this.imgList.length > 0 ? this.imgList.join(',') : '',
		      merchantId:this.$store.getters.getMerchant.merchantId
		    }
    		
    		let callBack = (res)=>{
		      console.log(res)
		      if(res.data.status == 200) {
		        Toast({
					message: '上传成功',
					iconClass: 'icon icon-success'
				})
		        if(this.qdsBtn) {
					this.$router.push({
						name: "construction",
						query: this.loginName
					})
				}
		      }
		    }
		    this.$reqFormPost(url, data, callBack);
		},
		ghetRepairId(){
			let attr = this.repairList.filter((item) => { return item.name == this.repairMan})[0].repairId
			
			return attr
		},
		removeImg(index){
			if(this.qdsBtn){
				this.imgList.splice(index,1)
			}
		},
		uploadImg(e){
			if(!this.qdsBtn){
				return
			}
			console.log(e)
			let fs = e.target.files;
			// 判断当前上传的是否是图片
			if (this.imgList.length > this.maxLen || (this.imgList.length + fs.length) > this.maxLen) {
                MessageBox.alert("最大只能上传10张");
                return 
            }
			let _this = this
			
			if(fs[0].type.indexOf('image') != -1) {
				 Indicator.open({
			        text: "上传中...",
			        spinnerType: "fading-circle"
			      });
				var fileData =  fs[0]
				let fd = new FileReader()
					fd.readAsDataURL(fs[0])
				fd.onload = function(){
			      	var img = new Image()
			      	img.src = this.result
			      	img.onload = function(){	
			      		
					var formData = new FormData()
	        		formData.append('file',fileData)
	        	let url = _this.$baseUrl.bizUrl + "/fileupload";
			    let callBack = res => {
			        Indicator.close();
					//alert(JSON.stringify(res))	
			        if (res == null) {
			          console.log("网络请求错误1！");
			          return;
			        }
					
			        if (res.data.status != 200) {
			          MessageBox.alert(res.data.message);
			          return;
			        }
			        if (res.data.status == 200) {
						console.log(res)
			          //this.showImage=[res.data.data.filename]
			          _this.imgList.push(res.data.data.filename)
			          
			        }
			      };
			      _this.$reqFormUpload(url, formData, callBack);
			      	}
				}
				
				
				
			}else{
				MessageBox.alert("只能上传图片");
			}
			e.target.value = "";
		},
        openPicker() {
        	if(this.qdsBtn){
        		this.$refs.picker.open();
        		document.getElementById('not').style.display = 'block'
        	}
      		
        },
      	handleConfirm(value){
      		var timestamp = Date.parse(value);
      		this.time = new Date(timestamp).getFullYear() + '-' + parseInt(new Date(timestamp).getMonth()+1) +'-'+new Date(timestamp).getDate()
      		document.getElementById('not').style.display = 'none'
      	},
      	goSelectBrand() {
      		this.$router.push({
				name: "filtercar",
				query: {
					pageName: 'upload'
				}
			});
      	},
      	formatTime() {
      		let hour = new Date().getHours()
			let minute = new Date().getMinutes()
			let second = new Date().getSeconds()
			return  [hour, minute, second].map(this.formatNumber).join(':')
      	},
      	formatNumber(n){
      		n = n.toString()
  			return n[1] ? n : '0' + n
      	}
   },
   beforeDestory(){
   	
   		
   },
   components: {
		Radio,
		Button,
		DatetimePicker

	}
}
</script>

